import { Message } from '@arco-design/web-vue';

// 协创视界主题色定义
export const collabVisionTheme = {
  // 主色系
  'arcoblue-1': '#E8F0FF',  // 主色超浅
  'arcoblue-2': '#BEDAFF',
  'arcoblue-3': '#94BFFF',
  'arcoblue-4': '#74A6FF',  // 主色浅
  'arcoblue-5': '#4C8DFF',  // 主色
  'arcoblue-6': '#3C7EFF',
  'arcoblue-7': '#2B6FF0',  // 主色深
  'arcoblue-8': '#1A5CD6',
  'arcoblue-9': '#0E4BBB',
  'arcoblue-10': '#003DA3',

  // 功能色 - 成功
  'green-1': '#E8FFEA',
  'green-2': '#AFF0B5',
  'green-3': '#7BE188',
  'green-4': '#4CD263',
  'green-5': '#23C343',
  'green-6': '#00B42A',
  'green-7': '#009A29',
  'green-8': '#008026',
  'green-9': '#006622',
  'green-10': '#004D1C',

  // 功能色 - 警告
  'orange-1': '#FFF3E8',
  'orange-2': '#FFD8B8',
  'orange-3': '#FFBB8B',
  'orange-4': '#FFA15D',
  'orange-5': '#FF8A34',
  'orange-6': '#FF7D00',
  'orange-7': '#D96D06',
  'orange-8': '#B45D0B',
  'orange-9': '#8F4A0F',
  'orange-10': '#6A3A11',

  // 功能色 - 错误
  'red-1': '#FFECE8',
  'red-2': '#FDCDC5',
  'red-3': '#FBACA3',
  'red-4': '#F98981',
  'red-5': '#F76560',
  'red-6': '#F53F3F',
  'red-7': '#CB2634',
  'red-8': '#A1232D',
  'red-9': '#771A24',
  'red-10': '#4D141B',

  // 中性色
  'gray-1': '#F7F8FA',
  'gray-2': '#F1F2F5',
  'gray-3': '#E5E6EB',
  'gray-4': '#C9CDD4',
  'gray-5': '#A9AEB8',
  'gray-6': '#86909C',
  'gray-7': '#6B7785',
  'gray-8': '#4E5969',
  'gray-9': '#333945',
  'gray-10': '#1D2129',

  // 辅助色
  'purple-5': '#8E65FE',  // 创作色
  'collab-green': '#2CD19E',   // 协作色
  'orangered-5': '#FF7D52' // 灵感色
};

// Arco Design 主题覆盖配置
export const arcoDesignOverrides = {
  common: {
    'primary-color': '#4C8DFF',   // 主色
    'color-white': '#FFFFFF',
    'color-black': '#000000',
  },
  button: {
    'primary-color': '#4C8DFF',
  },
  tag: {
    'size-default-height': '24px',
    'font-size': '14px',
  },
  card: {
    'color-bg': '#FFFFFF',
    'border-radius': '8px',
    'padding': '16px',
  },
  input: {
    'color-bg': '#F7F8FA',
    'color-bg-focus': '#FFFFFF',
    'border-radius': '4px',
  },
};

// 应用主题到Arco Design
export function applyCollabVisionTheme() {
  // 这里可以使用Arco Design的changeTheme或类似方法进行主题应用
  // 由于Vue项目中通常会使用CSS变量，我们也可以直接应用到:root CSS变量上
  
  const cssVars = {
    '--primary-color': '#4C8DFF',
    '--primary-color-light': '#74A6FF',
    '--primary-color-dark': '#2B6FF0',
    '--creative-color': '#8E65FE',
    '--collab-color': '#2CD19E',
    '--inspire-color': '#FF7D52',
    '--neutral-color': '#333945',
  };
  
  // 应用CSS变量到:root
  Object.entries(cssVars).forEach(([key, value]) => {
    document.documentElement.style.setProperty(key, value);
  });

  Message.success('协创视界主题已应用');
  return true;
}

export default {
  collabVisionTheme,
  arcoDesignOverrides,
  applyCollabVisionTheme
}; 